<template>
  <div class="swiper-box">
    <div class="img-tol">
      <h3 class="img-tit">{{ singerLis[0].name }}</h3>
      <span class="img-more">查看更多</span>
    </div>
    <div class="swiper-container-tl swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in singerLis[0].singers" :key="index" class="swiper-slide swiper-font item" @click="toggleFind(item)">
          <div class="icon">
            <div class="gradients"></div>
            <img :src="item.picUrl">
          </div>
          <p class="play-count">
            <i class="iconyousanjiao iconfont"></i>
            {{ Math.floor(item.playCount / 10000) }}万
          </p>
          <div class="text">
            <p class="name">{{item.name}}</p>
            <p class="disc"></p>
          </div>
        </div>
        <!-- <div class="swiper-slide swiper-font item">
          1
        </div> -->
       <!--  <div class="swiper-slide swiper-font item">
          2
        </div>
        <div class="swiper-slide swiper-font item">
          3
        </div>
        <div class="swiper-slide swiper-font item">
          4
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    toggleFind (item) {
      this.$router.push({
        path: `/find/${item.id}`
        // path: '/mine'
      })
      this.setDisc(item)
      // console.log(item)
      this.setFindNoneq(true)
      // this.$router.push({
      //   path: '/singer/234'
      // })
    },
    ...mapMutations({
      setFindNoneq: 'SET_FINDNONEQ_STATE',
      setDisc: 'SET_DISC'
    })
  },
  mounted () {
    var timerId = setInterval(() => {
      if (this.singerLis.length > 0) {
        // console.log(this.singerLis.length)
        var mySwiper = new Swiper('.swiper-container-tl', {
          // 自动播放时间
          // autoplay: 3000,
          // 用户操作swiper之后，是否禁止autoplay。默认为true
          // autoplayDisableOnInteraction: false,
          // 循环播放
          // loop: true,
          // 滑动到底就开始翻页
          nested: true,
          // resistanceRatio: 0,
          // 默认开始显示第几页
          // initialSlide: 4,
          // slide之间的距离
          spaceBetween: 20,
          // loopedSlides: 8,
          // slidesPerView: 'auto',
          // 启动动态检查器默认为false
          observer: true,
          // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
          // observerParents: true,
          // 每组显示个数
          slidesPerView: 3
          // 分页器也就是小圆点
          // pagination: '.swiper-pagination'
        })
        clearInterval(timerId)
        console.log(mySwiper)
      }
    }, 200)
  },
  props: ['singerLis']
}
</script>

<style scoped lang="less">
.img-tol {
  width: 100%;
  padding: 0;
  margin-top: 12px;
  height: 48px;
  line-height: 48px;
  .img-tit {
    float: left;
    margin: 0;
    display: inline-block;
  }
  .img-more {
    float: right;
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin-top: 9px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
  }
}
.item {
  width: 100%;
  height: 0;
  padding-bottom: 43%;
  position: relative;
  .icon {
    position: relative;
    width: 100%;
    .gradients {
      position: absolute;
      top: 0;
      width: 100%;
      height: 35px;
      border-radius: 3px;
      background: linear-gradient(rgba(109, 109, 109, 0.4),rgba(255, 255, 255, 0));
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
}
.play-count {
  position: absolute;
  margin-top: 2px;
  top: 5px;
  right: 15px;
  font-size: 13px;
  color: #fff;
}
.text {
  margin: 1px;
  line-height: 20px;
  text-align: left;
  height: 42px;
  line-height: 15px;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 14px;
  .name {
    margin: 0;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>
